<script setup>
import {onMounted} from 'vue'
import {
  NAvatar,
  NButton,
  NFlex,
  NForm,
  NFormItem,
  NImage,
  NInput,
  NSelect,
  NTabPane,
  NTabs,
  NTag,
  useMessage
} from 'naive-ui'

import CommonPage from '@/components/page/CommonPage.vue'
import api from '@/api'
import default_image from "@/assets/images/mz.jpg";
import {getToken, renderIcon} from "@/utils";
import TheIcon from "@/components/icon/TheIcon.vue";
import {useCRUD} from "@/composables";
import CrudModal from "@/components/table/CrudModal.vue";
const base_path = import.meta.env.VITE_BASE
const message = useMessage()

const props = defineProps({
  infoData: {
    type: Object,
    required: true
  }
});
const data = reactive({
    card_loading1:false,
    card_loading2:false,
    card_loading3:false,
    card_loading4:false,
    select_customer:{
    name:"未选择",
    card_number:"--",
    user_level_name:"--",
    mobile:"--",
    bi_date:"--",
    sex:"--",
    hkqd:"--",
    age:"--",
    created_at:"--",
    last_come:"--",
    record_hobby:[],
    totals:{
    weimei:0,
    cdp:0,
    fujia:0,
    other:0,
    buy_money:0,
    cases:0,
    appoint_count:0,
    return_count:0,
    operation_count:0,
    face_count:0,
    test_count:0,
    having_customers:0,
    customers_level5:0

    }
    },
    hobby:[],
    new_hobby:"",
    customer_data:[],
    new_customer_data:"",
    customer_data3:[],
    new_customer_data3:"",
    customer_data1:[],
    new_customer_data1:""
});

onMounted(() => {
  data.select_customer = props.infoData
  on_ref()
})


function on_ref(){
  get_hobby()
  get_cutomer_data()
  get_cutomer_data3()
  get_cutomer_data1()
}

function get_hobby(){
  data.card_loading1 = true
  api.CustomerHobby({
    user_id:data.select_customer.user_id,
  }).then((res) => {
     data.hobby = res.data.items
     data.card_loading1 = false
  })
}
function get_cutomer_data(){
  data.card_loading2 = true
  api.CustomerData({
    user_id:data.select_customer.user_id,
    type:2
  }).then((res) => {
     data.customer_data = res.data.items
    data.card_loading2 = false
  })
}
function get_cutomer_data3(){
  data.card_loading3= true
  api.CustomerData({
    user_id:data.select_customer.user_id,
    type:3
  }).then((res) => {
     data.customer_data3 = res.data.items
     data.card_loading3 = false
  })
}
function get_cutomer_data1(){
  data.card_loading4 = true
  api.CustomerData({
    user_id:data.select_customer.user_id,
    type:1
  }).then((res) => {
     data.customer_data1 = res.data.items
     data.card_loading4 = false
  })
}

function create_tag(type){
   if(type===1){
     if(!data.new_hobby){
       message.error('请先填写喜好内容')
      return;
    }
    api.CustomerHobbyAdd({
      user_id:data.select_customer.user_id,
      content:data.new_hobby
    }).then((res) => {
      get_hobby()
      message.success('添加成功')
    })
   }else if(type===2){
     if(!data.new_customer_data){
       message.error('请先填写疾病/医美史')
      return;
     }
     api.CustomerDataAdd({
      user_id:data.select_customer.user_id,
      content:data.new_customer_data,
       type:2
    }).then((res) => {
      get_cutomer_data()
      message.success('添加成功')
    })
  }else if(type===3){
     if(!data.new_customer_data3){
       message.error('请先填写客户需求')
      return;
     }
     api.CustomerDataAdd({
      user_id:data.select_customer.user_id,
      content:data.new_customer_data3,
       type:3
    }).then((res) => {
      get_cutomer_data3()
      message.success('添加成功')
    })
  }else if(type===4){
     if(!data.new_customer_data1){
       message.error('请先填写背景资料')
      return;
     }
     api.CustomerDataAdd({
      user_id:data.select_customer.user_id,
      content:data.new_customer_data1,
       type:1
    }).then((res) => {
      get_cutomer_data1()
      message.success('添加成功')
    })
  }
}



</script>
<template>
  <div class="container">
    <n-grid x-gap="12" y-gap="12" :cols="2">
      <n-gi>
        <n-spin :show="data.card_loading1" style="--n-opacity-spinning:0.1;">
           <n-card  embedded hoverable content-style="padding: 20px;" :segmented="{content: true,footer: 'soft',}">
                    <template #header>
                      <div style="display: flex; align-items: center;justify-content: flex-start">
                        <n-h6 prefix="bar" type="info" style="margin: 0;font-size: 16px">喜好标签</n-h6>
                      </div>
                    </template>
                     <n-scrollbar x-scrollable>
                        <div class="tags-container">
                          <n-card style="width: 150px" v-for="item in data.hobby" size="small" :title="item.name+'记录'" :segmented="{content: true,footer: 'soft',}">
                            {{item.content}}
                          </n-card>
                        </div>
                     </n-scrollbar>
                     <template #footer>
                        <div style="display:flex;">
                          <n-input size="large" placeholder="新增喜好标签" v-model:value="data.new_hobby"/>
                          <n-button size="large" type="info" style="margin-left: 5px" @click="create_tag(1)">
                            <TheIcon icon="material-symbols:database-upload-outline" :size="16" class="mr-5" />保存</n-button>
                        </div>
                     </template>
           </n-card>
       </n-spin>
      </n-gi>

      <n-gi>
        <n-spin :show="data.card_loading2" style="--n-opacity-spinning:0.1;">
           <n-card  embedded hoverable content-style="padding: 20px;" :segmented="{content: true,footer: 'soft',}">
                    <template #header>
                      <div style="display: flex; align-items: center;justify-content: flex-start">
                        <n-h6 prefix="bar" type="info" style="margin: 0;font-size: 16px">疾病/医美史</n-h6>
                      </div>
                    </template>
                     <n-scrollbar x-scrollable>
                        <div class="tags-container">
                          <n-card style="width: 150px" v-for="item in data.customer_data" size="small" :title="item.name+'记录'" :segmented="{content: true,footer: 'soft',}">
                            {{item.content}}
                          </n-card>
                        </div>
                     </n-scrollbar>
                     <template #footer>
                        <div style="display:flex;">
                          <n-input size="large" placeholder="新增疾病/医美史" v-model:value="data.new_customer_data"/>
                          <n-button size="large" type="info" style="margin-left: 5px" @click="create_tag(2)">
                            <TheIcon icon="material-symbols:database-upload-outline" :size="16" class="mr-5" />保存</n-button>
                        </div>
                     </template>
           </n-card>
       </n-spin>
      </n-gi>


      <n-gi>
        <n-spin :show="data.card_loading3" style="--n-opacity-spinning:0.1;">
           <n-card  embedded hoverable content-style="padding: 20px;" :segmented="{content: true,footer: 'soft',}">
                    <template #header>
                      <div style="display: flex; align-items: center;justify-content: flex-start">
                        <n-h6 prefix="bar" type="info" style="margin: 0;font-size: 16px">客人需求</n-h6>
                      </div>
                    </template>
                     <n-scrollbar x-scrollable>
                        <div class="tags-container">
                          <n-card style="width: 150px" v-for="item in data.customer_data3" size="small" :title="item.name+'记录'" :segmented="{content: true,footer: 'soft',}">
                            {{item.content}}
                          </n-card>
                        </div>
                     </n-scrollbar>
                     <template #footer>
                        <div style="display:flex;">
                          <n-input size="large" placeholder="新增客人需求" v-model:value="data.new_customer_data3"/>
                          <n-button size="large" type="info" style="margin-left: 5px" @click="create_tag(3)">
                            <TheIcon icon="material-symbols:database-upload-outline" :size="16" class="mr-5" />保存</n-button>
                        </div>
                     </template>
           </n-card>
       </n-spin>
      </n-gi>


      <n-gi>
        <n-spin :show="data.card_loading4" style="--n-opacity-spinning:0.1;">
           <n-card  embedded hoverable content-style="padding: 20px;" :segmented="{content: true,footer: 'soft',}">
                    <template #header>
                      <div style="display: flex; align-items: center;justify-content: flex-start">
                        <n-h6 prefix="bar" type="info" style="margin: 0;font-size: 16px">背景资料</n-h6>
                      </div>
                    </template>
                     <n-scrollbar x-scrollable>
                        <div class="tags-container">
                          <n-card style="width: 150px" v-for="item in data.customer_data1" size="small" :title="item.name+'记录'" :segmented="{content: true,footer: 'soft',}">
                            {{item.content}}
                          </n-card>
                        </div>
                     </n-scrollbar>
                     <template #footer>
                        <div style="display:flex;">
                          <n-input size="large" placeholder="新增背景资料" v-model:value="data.new_customer_data1"/>
                          <n-button size="large" type="info" style="margin-left: 5px" @click="create_tag(4)">
                            <TheIcon icon="material-symbols:database-upload-outline" :size="16" class="mr-5" />保存</n-button>
                        </div>
                     </template>
           </n-card>
       </n-spin>
      </n-gi>
    </n-grid>
 </div>
</template>


<style>
 .tags-container{
    display: flex;
    gap: 10px;
    white-space: nowrap;
   margin-bottom: 12px;
 }

</style>